<template>
  <div class="app-detail-item">
    <div class="content-box">
      <div class="img-box">
        <img :src="ImgUrl" :alt="detailItem.nm">
        <div class="wish">
          <span class="sum">{{ detailItem.wish }}</span>
          人想看
        </div>
      </div>
      <div class="film-info">
        <h5 class="title">{{ detailItem.nm }}</h5>
        <p class="date">{{ comingTitle }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["detailItem"],
  computed: {
    ImgUrl() {
      return this.detailItem.img.replace(/w.h/, "170.230");
    },
    comingTitle() {
      return this.detailItem.comingTitle.slice(0, -3);
    }
  }
};
</script>

<style lang="scss">
.app-detail-item {
  height: 4.186667rem;
  width: 2.266667rem;
  display: inline-block;

  .content-box {
    display: inline-block;
    width: 2.266666rem;
    height: auto;
    overflow: hidden;
    margin-right: 0.266666rem;

    .img-box {
      width: 2.266667rem;
      height: 3.066667rem;
      position: relative;

      .wish {
        position: absolute;
        left: 0.106667rem;
        bottom: 0.053333rem;
        color: #faaf00;
        font-size: 0.293333rem;
        font-weight: 600;
        width: auto;
        height: auto;
      }
    }

    .film-info {
      height: auto;

      .title {
        margin: 0 0 0.08rem;
        font-size: 0.346667rem;
        color: #222;
        font-weight: bold;
      }

      .date {
        margin: 0;
        font-size: 0.32rem;
        color: #999;
        white-space: nowrap;
      }
    }
  }
}
</style>
